<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- <div id="test"></div> -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link
      rel="icon"
      href="https://gips3.baidu.com/it/u=81373459,3021591889&fm=3039&app=3039&f=JPEG?w=1024&h=1024"
    />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />

    <title>Web数据挖掘</title>
  </head>

  <body>
    <div class="top">
      <image
        class="topLogo"
        src="https://gips3.baidu.com/it/u=81373459,3021591889&fm=3039&app=3039&f=JPEG?w=1024&h=1024"
      ></image>
      <h1 class="topText">Cathy's Final Assignment</h1>
    </div>
    <div class="content">
      <div
        class="chahua"
        style="
          background-image: url('https://pic.imgdb.cn/item/648ef2061ddac507ccd89397.png');
        "
      ></div>
      <!-- <div class="line"></div> -->
      <div class="biaodan">
        <image
          class="pythonLogo"
          src="https://pic.imgdb.cn/item/648ef0831ddac507ccd5fc50.png"
        ></image>
        <h3 class="biaodanh3">Web数据挖掘可视化平台</h3>
        <form id="form" method="POST" action="/wait">
          <input
            type="text"
            id="job"
            name="job"
            placeholder="请输入岗位名称"
            required
            autofocus
          />
          <input
            type="text"
            id="area"
            name="area"
            placeholder="请输入岗位地区(仅支持广州、深圳)"
            required
          />
          <button
            id="sign_button"
            class="button-33"
            type="submit"
            role="button"
          >
            查询
          </button>
        </form>
      </div>
    </div>
    <div class="footText">
      此平台基于 Flask框架 + Echarts数据可视化图表 搭建而成
    </div>
  </body>
  <style>
    body {
      margin: 0;
	width: 100%;
	height: 100%;
	font-family: "Exo", sans-serif;
	color: #fff;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      /*margin-left: 30px;*/
      /*margin-top: 10px;*/
    }
    .topLogo {
      width: 80px;
      height: 80px;
      border-radius: 100%;
      margin-left: 20px;
    }
    .topText {
      font-size: 46px;
      margin-left: 15px;
      color: white;
    }
    .content {
      width: 1200px;
      height: 640px;
      background-color: white;
      margin: auto;
      margin-top: 20px;
      border-radius: 30px;
      display: flex;
      flex-direction: row;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
        rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }
    .chahua {
      width: 40%;
      margin-left: 30px;
      background-position: center center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .line {
      border-left: 3px solid #cccccc;
      height: 80%;
      width: 0px;
      margin-top: 50px;
    }
    .biaodan {
      width: 40%;
      height: 80%;
      /*background-color: white;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 0px 30px 30px 0px;
      margin-top: 10px;
    }
    .pythonLogo {
      width: 80px;
      height: 80px;
    }
    .biaodanh3 {
      font-size: 36px;
      font-weight: 500;
      color: #080808;
    }
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #job {
      border: none;
      width: 300px;
      height: 30px;
      border-bottom: 2px solid #cccccc;
      padding: 5px;
    }
    #area {
      margin-top: 30px;
      border: none;
      width: 300px;
      height: 30px;
      border-bottom: 2px solid #cccccc;
      padding: 5px;
    }
    #sign_button {
      width: 250px;
      height: 50px;
      border-radius: 40px;
      border: none;
      margin-top: 30px;
    }
    .button-33 {
      background-color: #03e9f4;
      border-radius: 100px;
      box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
        rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px,
        rgba(44, 187, 99, 0.15) 0 4px 8px, rgba(44, 187, 99, 0.15) 0 8px 16px,
        rgba(44, 187, 99, 0.15) 0 16px 32px;
      color: green;
      cursor: pointer;
      display: inline-block;
      font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
        sans-serif;
      padding: 7px 20px;
      text-align: center;
      text-decoration: none;
      transition: all 250ms;
      border: 0;
      font-size: 16px;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    .button-33:hover {
      box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,
        rgba(44, 187, 99, 0.25) 0 1px 2px, rgba(44, 187, 99, 0.25) 0 2px 4px,
        rgba(44, 187, 99, 0.25) 0 4px 8px, rgba(44, 187, 99, 0.25) 0 8px 16px,
        rgba(44, 187, 99, 0.25) 0 16px 32px;
      transform: scale(1.05) rotate(-1deg);
    }
    .footText {
      text-align: center;
      margin-top: 40px;
      color: black;
    }
  </style>
</html>
